<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录框</title>
</head>
<style>
    #main {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: bisque;
    }
    form {
        width: 400px;
        height: 300px;
        background: linear-gradient(to bottom, rgb(17,92,77), rgba(173, 243,173, 1));
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: 20px;
        box-shadow: 10px 10px 30px;
    }
    input{
        border-radius: 3px;
        border: 1px solid #ccc;
        padding: 5px;
        outline: none;
    }
    input:hover{
        border-color: rgba(211,237,228);
    }
    form>div{  
        margin-top: 10px;
    }
</style>
<script>
    function login() {
        // 通过id获取到name输入框
        let nameinput = document.getElementById("nameinput");
        // 通过判断name输入框中的值的长度
        if(nameinput.value.length < 2){
            alert("你的用户名太短了");
            return false;
        }
        if(nameinput.value.includes("犯罪")){
            alert("你的用户名太奇葩了");
            return false;
        }
        if(nameinput.value.startsWith("山本")){
            alert("我们的系统只给cn学生用");
            return false;
        }
        if(nameinput.value.endsWith("太郎")){
            document.getElementById("nameinput").value = "太郎";
            alert("中国人的姓名不以太郎结尾");
            return false;
        }
        
        // 验证密码框
        let pswdinput = document.getElementById("pswdinput");
        if(pswdinput.value.length < 6){
            alert("你的密码不符合要求");
            return false;
        }
        
        // 验证验证码
        let yzmInput = document.getElementById("yzmInput");
        if(yzmInput.value.length != 6){
            alert("你的验证码长度不正确");
            return false;
        }
        
        // 页面跳转到某个地址
        window.location.href = "index.html";
        return true;
    }
</script>
<body>
    <div id="main">
        <form onsubmit="return login()">
            <h1 style="color: aliceblue;">欢迎使用川邮学员管理系统</h1>
            <hr style="width: 90%;">
            <div>
                <label for="nameinput">用户名:</label>
                <input type="text" id="nameinput">
            </div>

            <div>
                <label for="pswdinput">密&nbsp;&nbsp;&nbsp;码:</label>
                <input type="password" id="pswdinput">
            </div>
            <div style="display: flex;"> 
                <label for="yzmInput" style="margin-right: 40px;">验证码:</label>
                <input type="text" id="yzmInput" style="width: 30%;">
                <button type="button" style="margin-left: 18px;">获取验证码</button>
            </div>
            <div>   
                <input type="button" value="新用户注册" style="background-color: deepskyblue;">
                <input type="submit" value="登录" style="background-color: coral;">
            </div>
        </form>
    </div>
</body>
</html>